<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item>用户管理</el-breadcrumb-item>
  </el-breadcrumb>

  <el-row class="leader-header">
    <el-col :span="6">
      <el-form-item label="姓名：">
        <el-input v-model="input" style="width: 240px" placeholder="请输入查询信息"/>
      </el-form-item>
    </el-col>
    <el-col :span="4">
      <el-button-group>
        <el-button type="primary" icon="el-icon-edit">查询</el-button>
        <el-button type="primary" icon="el-icon-share">全部</el-button>
        <el-button type="primary" icon="el-icon-delete" @click="addUserinfo">新增</el-button>
      </el-button-group>
    </el-col>
    <el-col :span="8">
    </el-col>
    <el-col :span="6">
      <div class="grid-content ep-bg-purple-light"/>
    </el-col>
  </el-row>

  <!--表格-->
  <el-table :data="tableData" border :header-cell-style="{background:'#5698c3',color:'#eef7f2'}" style="width: 100%">

    <el-table-column type="index" label="序号" width="60"/>
    <el-table-column prop="date" label="Date" width="150"/>
    <el-table-column prop="name" label="Name" width="120"/>
    <el-table-column prop="state" label="State" width="120"/>
    <el-table-column prop="city" label="City" width="120"/>
    <el-table-column prop="address" label="Address" width="300"/>
    <el-table-column label="头像" width="150" align="center">
      <template #default="scope">
        <img :src="scope.row.picture" height="75" width="auto"/>
      </template>
    </el-table-column>
    <el-table-column prop="zip" label="Zip" width="120"/>
    <el-table-column fixed="right" label="Operations" min-width="120">
      <template #default>
        <el-button link type="primary" size="small" @click="handleClick">
          查看
        </el-button>
        <el-button link type="primary" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>


  <!--  分页-->
  <el-pagination
      v-model:current-page="data.currentPage"
      v-model:page-size="data.pageSize"
      background
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="data.total"
      class="mt-4"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />

  <!--  <el-button type="success" @click="pageclick()">页面修改</el-button>-->
</template>

<script setup>
import {reactive, ref} from "vue";

const input = ref('')
const handleClick = () => {
  console.log('click')
}

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    picture: 'https://img1.baidu.com/it/u=1448634477,43834514&fm=253&fmt=auto&app=138&f=JPEG?w=518&h=500',
    zip: 'CA 90036',
    tag: 'Home',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    picture: 'https://img1.baidu.com/it/u=4001915722,363629854&fm=253&fmt=auto?w=800&h=800',
    zip: 'CA 90036',
    tag: 'Office',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    picture: 'https://img0.baidu.com/it/u=3287211087,2361764032&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
    zip: 'CA 90036',
    tag: 'Home',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    picture: 'https://img0.baidu.com/it/u=244721933,1131063283&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
    zip: 'CA 90036',
    tag: 'Office',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    picture: 'https://img1.baidu.com/it/u=1448634477,43834514&fm=253&fmt=auto&app=138&f=JPEG?w=518&h=500',
    zip: 'CA 90036',
    tag: 'Home',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    picture: 'https://img1.baidu.com/it/u=4001915722,363629854&fm=253&fmt=auto?w=800&h=800',
    zip: 'CA 90036',
    tag: 'Office',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    picture: 'https://img0.baidu.com/it/u=3287211087,2361764032&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
    zip: 'CA 90036',
    tag: 'Home',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    picture: 'https://img0.baidu.com/it/u=244721933,1131063283&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
    zip: 'CA 90036',
    tag: 'Office',
  },

]


//分页
const data = reactive({
  pageSize: 10,
  currentPage: 1,
  total: 600
})

// const pageclick=()=>{
//   data.total = 800
// }

const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
}
</script>

<style scoped>
.leader-header {
  margin-top: 20px;
}

.mt-4 {
  margin-top: 15px;
  /*定位*/
  justify-content: right;
}
</style>